<template>
  <div class="choose">
    <el-card>
      <div slot="header">
        <h2>选择产品</h2>
      </div>
      <el-row>
        <el-col :span="7">
          <el-input
            style="width: 200px"
            clearable
            placeholder="产品名称"
            size="small"
            v-model.trim="search.goodName"
          ></el-input>
        </el-col>
        <el-col :span="7">
          <el-input
            style="width: 200px"
            clearable
            size="small"
            placeholder="产品编码"
            v-model.trim="search.goodId"
          ></el-input>
        </el-col>
        <el-col :span="7">
          <el-select
            disabled
            class="bot"
            @change="selectStatus"
            size="small"
            clearable
            v-model="search.goodStatus"
            placeholder="产品状态"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button @click="doSearch" size="small" type="primary"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-card class="btCard">
      <el-table
        v-loading="loading"
        :data="goodsList"
        border
        :fit="true"
        :header-cell-class-name="cellClass"
        @selection-change="moreChange"
        @current-change="handleSelectionChange"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          v-if="!$route.params.type"
          label="选择"
          align="center"
          width="50"
        >
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.checked"> </el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          align="center"
          label="选择"
          type="selection"
          width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="goodId"
          label="产品编号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="goodName"
          label="产品名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="picUrl"
          label="图片"
          style="text-align: center"
          width="90"
        >
          <template slot-scope="scope">
            <img :src="scope.row.picUrl" alt />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="price_now" label="现/划线价">
          <template slot-scope="scope"
            >{{ scope.row.marketPrice / 100 }} /
            {{ scope.row.originalPrice / 100 }}</template
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="goodStatus"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">{{
            scope.row.goodStatus == "0" ? "已上架 " : "已下架"
          }}</template>
        </el-table-column>
        <el-table-column align="center" prop="url" label="链接地址" width="280">
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right; margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.size"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
      <el-row>
        <el-col class="bott" :span="24">
          <el-button style="margin-right: 10px" @click="cancle" size="small"
            >取消</el-button
          >
          <el-button @click="doChoose" type="primary" size="small"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import modelApi from "@/api/lejv/tkselect";
import _ from "lodash";
export default {
  name: "Choose",
  data() {
    return {
      loading: false,
      search: {
        goodName: "",
        goodId: "",
        goodStatus: "0",
      },
      selectUrl: "",
      channel: "",
      selectGoods: [],
      goodsList: [],
      page: {
        start: 1,
        limit: 10,
        total: 10,
        size: [10, 20, 30],
      },
      statusList: [
        {
          value: "0",
          label: "已上架",
        },
        {
          value: "1",
          label: "已下架",
        },
      ],
    };
  },
  computed: {},
  created() {
    this.getGoodsList();
    this.selectGoods = [];
    // this.tkSelectList = this.$store.state.app.goodList
  },
  mounted() {},
  methods: {
    //查询
    doSearch() {
      this.page.start = 1;
      this.getGoodsList();
    },
    //产品状态
    selectStatus(val) {
      // console.log(val);
      this.search.goodStatus = val;
    },
    // 选择产品  banner页面为单选  泰康优选页面为多选
    handleSelectionChange(val) {
      if (!this.$route.params.type) {
        this.selectUrl = val.url;
        this.channel = val.channel;
        this.goodsList.forEach((item) => {
          if (item.id == val.id) {
            item.checked = true;
          } else {
            item.checked = false;
          }
        });
      }
      this.$forceUpdate();
    },
    //多选
    moreChange(val) {
      if (this.$route.params.type) {
        this.selectGoods = val;
        // console.log(this.selectGoods)
      }
    },
    //添加表头class名
    cellClass(row) {
      if (row.columnIndex == 0) {
        return "disableCheck";
      }
    },
    //获取产品列表
    getGoodsList() {
      this.loading = true;
      let params = {
        pageSize: this.page.limit,
        pageNum: this.page.start,
        ...this.search,
      };
      params = _.pickBy(params, (item) => item);
      let api = "";
      if (this.$route.params.type) {
        api = modelApi.NogoodsList(params);
      } else {
        api = modelApi.goodsList(params);
      }
      api
        .then((res) => {
          // console.log(res);
          if (res.msg == "success") {
            this.loading = false;
            this.goodsList = JSON.parse(JSON.stringify(res.data.goods)); //拷贝数据,避免直接修改原数据
            this.goodsList.forEach((item) => {
              item.checked = false; //循环给每项添加是否选中标识
            });
            // this.goodsList = this.goodsList.filter(
            //   (item) => item.goodStatus == "0"
            // );
            this.page.total = res.data.totalElements;
          }
        })
        .catch((res) => {
          this.$message({
            type: "error",
            message: "请刷新后重试!",
          });
          this.loading = false;
          this.page.total = 0;
        });
    },
    //取消
    cancle() {
      window.history.back(-1);
    },
    //确定选择
    doChoose() {
      let url = this.selectUrl;
      let channel = this.channel;
      if (this.$route.query.edit) {
        //编辑页面
        if (url == "") {
          this.$message({
            type: "warning",
            message: "请至少选择一个产品!",
          });
        } else {
          this.$router.push({
            name: "Edit",
            params: { editId: this.$route.query.edit, url },
          });
        }
      } else if (this.$route.params.type) {
        if (this.selectGoods.length == 0) {
          this.$message({
            type: "warning",
            message: "请至少选择一个产品!",
          });
        } else {
          // 合并数组,去重
          let _arr = new Array();
          for (let i = 0; i < this.$route.params.goods.length; i++) {
            _arr.push(this.$route.params.goods[i]);
          }
          for (let i = 0; i < this.selectGoods.length; i++) {
            var flag = true;
            for (let j = 0; j < this.$route.params.goods.length; j++) {
              if (this.selectGoods[i].id == this.$route.params.goods[j].id) {
                flag = false;
                break;
              }
            }
            if (flag) {
              _arr.push(this.selectGoods[i]);
            }
          }
          this.$router.push({
            name: "EditGoods",
            params: { type: 1, selectGoods: _arr },
          });
          this.selectGoods = [];
        }
      } else {
        //新增页面
        if (url == "") {
          this.$message({
            type: "warning",
            message: "请至少选择一个产品!",
          });
        } else {
          this.$router.push({ name: "Add", params: { url, channel } });
        }
      }
    },
    //分页切换
    handleSizeChange(val) {
      this.page.limit = val;
      this.getGoodsList();
    },
    //分页
    handleCurrentChange(val) {
      this.page.start = val;
      this.getGoodsList();
    },
  },
};
</script>
<style lang="scss" >
.el-loading-mask {
  z-index: 90;
}
</style>
<style scoped lang="scss">
.choose {
  .el-table ::v-deep.disableCheck > .cell .el-checkbox__inner {
    display: none !important;
    position: relative;
  }
  .el-table ::v-deep.disableCheck > .cell::before {
    display: block;
    content: "选择";
    position: absolute;
    text-align: center;
    // width: 100%;
  }
  h2 {
    margin: 0;
  }
  padding: 20px;
  ::v-deep.el-table tr {
    cursor: pointer;
  }
  .bot {
    width: 200px;
    margin-left: 5px;
  }
  .btCard {
    margin-top: 20px;
  }
  img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
  .bott {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
